<template>
    <el-dialog
        v-model="serviceAddOrUpdateDialogVisible"
        title="添加微服务"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="serviceForm" :rules="serviceRules" ref="serviceFormRef">
                <el-form-item label="微服务名称" label-width="20%" prop="applicationName">
                    <el-input v-model="serviceForm.applicationName" placeholder="微服务名称" clearable />
                </el-form-item>
                <el-form-item label="微服务GIT路径" label-width="20%" prop="gitPath">
                    <el-input v-model="serviceForm.gitPath" placeholder="微服务GIT路径" clearable />
                </el-form-item>
                <el-form-item label="微服务POM路径" label-width="20%" prop="pomPath">
                    <el-input v-model="serviceForm.pomPath" placeholder="微服务POM路径" clearable />
                </el-form-item>
                <el-form-item label="微服务JAR包路径" label-width="20%" prop="jarPath">
                    <el-input v-model="serviceForm.jarPath" placeholder="微服务JAR包路径" clearable />
                </el-form-item>
                <el-form-item label="微服务JAR包名称" label-width="20%" prop="jarName">
                    <el-input v-model="serviceForm.jarName" placeholder="微服务JAR包名称" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {addApplication, applicationInfoQuery, updateApplication} from "@/request/service";
import {ElNotification} from "element-plus";

export default {
    name: "ServiceAddOrUpdateDialog",
    props: ['serviceForm'],
    data() {
        return {
            serviceRules: {
                applicationName: [{ required: true, message: '微服务名称不能为空', trigger: 'blur' }],
                gitPath: [{ required: true, message: '微服务GIT路径不能为空', trigger: 'blur' }],
                pomPath: [{ required: true, message: '微服务POM路径不能为空', trigger: 'blur' }],
                jarPath: [{ required: true, message: '微服务JAR包路径不能为空', trigger: 'blur' }],
                jarName: [{ required: true, message: '微服务JAR包名称不能为空', trigger: 'blur' }]
            },
            saveLoading: false
        }
    },
    methods: {
        cancelDialog() {
            this.$store.commit('changeServiceAddOrUpdateDialogVisible', false);
        },
        submitDialog() {
            this.saveLoading = true
            let formEl = this.$refs['serviceFormRef']
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    // 根据ID判断是否是添加还是修改
                    if (this.serviceForm.id === '') {
                        // 添加
                        addApplication(this.serviceForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                })
                                this.$store.commit('changeServiceAddOrUpdateDialogVisible', false);
                                applicationInfoQuery({}).then(res => {
                                    this.$store.commit('changeServiceApplicationDataList', res.data);
                                })
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    } else {
                        // 修改
                        updateApplication(this.serviceForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                })
                                this.$store.commit('changeServiceAddOrUpdateDialogVisible', false);
                                applicationInfoQuery({}).then(res => {
                                    this.$store.commit('changeServiceApplicationDataList', res.data);
                                })
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    }
                }
            });
        }
    },
    computed: {
        serviceAddOrUpdateDialogVisible() {
            return this.$store.state.serviceAddOrUpdateDialogVisible;
        }
    }
}
</script>

<style scoped lang="less">
.formContainer {
    .selectIconsClass {
        width: 20px;
    }
}
</style>